<template>
  <div class="about">
    <div class="top">数据总览</div>
    <div class="Top-nav">
      <div class="navbox" v-for="item in arr1">
        <img :src="item.img" />
        <div class="content">
          <span>{{ item.price }}</span>
          <span class="neirong">{{ item.neir }}</span>
        </div>
        <img :src="item.img2" class="img1" />
      </div>
    </div>
    <!-- 图 -->
    <div class="tubox clear">
      <div class="left">
        <p class="tit">近七天挂号预约记录</p>
        <p class="little">预约人次</p>
        <div id="myEcharts" :style="{ width: '100%', height: '400px' }"></div>
      </div>
      <div class="right">
        <p class="tit">近七天门诊充值趋势</p>
        <p class="little">单位(元)</p>
        <div id="myEcharts1" :style="{ width: '100%', height: '400px' }"></div>
      </div>
    </div>
    <!-- 表格 -->
    <div class="biao">
      <div class="biao-left">
        <h3>实时挂号</h3>
        <el-table
          :data="TableData2"
          :header-cell-style="{ fontSize: '10px' }"
          class="table1"
        >
          <el-table-column prop="imgSrc" label="头像" width="50">
            <template #default="scope">
              <img :src="scope.row.imgSrc" class="table-tu" />
            </template>
          </el-table-column>
          <el-table-column prop="gua_name" label="患者姓名" width="100" />
          <el-table-column prop="gua_phone" label="患者手机号码" width="140" />
          <el-table-column prop="gua_ke" label="挂号科室" width="120" />
          <el-table-column prop="gua_money" label="挂号费" width="60" />
          <el-table-column prop="gua_time" label="挂号时间" width="180" />
        </el-table>
      </div>
      <div class="biao-right">
        <div class="biao-right-l">
          <h3>热门科室</h3>
          <el-table
            :data="tableData1"
            style="width: 100%"
            :header-cell-style="{ fontSize: '10px' }"
          >
            <el-table-column label="排名" prop="index">
              <template #default="scope">
                <div
                  class="table1-tu"
                  :class="{
                    active: scope.$index == 0,
                    active1: scope.$index == 1,
                    active2: scope.$index == 2,
                  }"
                >
                  {{ scope.$index + 1 }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="Keshi" label="科室" />
            <el-table-column prop="Gua" label="排号量" />
          </el-table>
        </div>
        <div class="biao-right-r">
          <h3>热门医生</h3>
          <el-table
            :data="TableData"
            style="width: 100%"
            :header-cell-style="{ fontSize: '10px' }"
          >
            <el-table-column label="排名" prop="index">
              <template #default="scope">
                <div
                  class="table1-tu"
                  :class="{
                    active: scope.$index == 0,
                    active1: scope.$index == 1,
                    active2: scope.$index == 2,
                  }"
                >
                  {{ scope.$index + 1 }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="Doc_name" label="医生姓名" />
            <el-table-column prop="Doc_num" label="排号量" />
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { toRefs, reactive, ref, onMounted, onUnmounted } from "vue";
import * as echarts from "echarts";
import { getHotKe, getHotDoc, getHotGua } from "../../utils/api/shouye";
export default {
  setup() {
    const data = reactive({
      arr1: [
        {
          img: "http://rchqfbdix.hn-bkt.clouddn.com/33333.png",
          price: 200,
          neir: "今日预约人数",
          img2: "https://pzq-1310241416.cos.ap-chengdu.myqcloud.com/pzq/%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9%20%283%29/8174284d53f1e41527cbb96a185f9e3.png",
        },
        {
          img: "https://pzq-1310241416.cos.ap-chengdu.myqcloud.com/pzq/%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9%20%283%29/4208487f91d675211055c53bbcdff55.png",
          price: 300,
          neir: "今日预约人数",
          img2: "https://pzq-1310241416.cos.ap-chengdu.myqcloud.com/pzq/%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9%20%283%29/8174284d53f1e41527cbb96a185f9e3.png",
        },
        {
          img: "https://pzq-1310241416.cos.ap-chengdu.myqcloud.com/pzq/%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9%20%283%29/a9c85f9c61dbbcf962d54fc18f0a1be.png",
          price: 23,
          neir: "今日预约人数",
          img2: "https://pzq-1310241416.cos.ap-chengdu.myqcloud.com/pzq/%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9%20%283%29/8174284d53f1e41527cbb96a185f9e3.png",
        },
        {
          img: "https://pzq-1310241416.cos.ap-chengdu.myqcloud.com/pzq/%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9%20%283%29/0c11e8141ca9e05c8dcc6e961618413.png",
          price: 45,
          neir: "今日预约人数",
          img2: "https://pzq-1310241416.cos.ap-chengdu.myqcloud.com/pzq/%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9%20%283%29/8174284d53f1e41527cbb96a185f9e3.png",
        },
        {
          img: "https://pzq-1310241416.cos.ap-chengdu.myqcloud.com/pzq/%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9%20%283%29/9854c1f2a976101ebcaf5ec00e14a92.png",
          price: 27,
          neir: "今日预约人数",
          img2: "https://pzq-1310241416.cos.ap-chengdu.myqcloud.com/pzq/%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9%20%283%29/8174284d53f1e41527cbb96a185f9e3.png",
        },
      ],
      TableData: [],
      tableData1: [],
      TableData2: [],
    });
    let host = "http://localhost:3000/upload/";
    // 向后端发送请求
    // 热门科室
    function getKeshi() {
      getHotKe().then((value) => {
        data.tableData1 = value.data.data;
      });
    }
    getKeshi();
    // 热门医生
    function getYisheng() {
      getHotDoc().then((value) => {
        data.TableData = value.data.data;
      });
    }
    getYisheng();
    // 实时挂号
    function getguahao() {
      getHotGua().then((value) => {
        data.TableData2 = value.data.data;
        // console.log(data.TableData2);
        for (var i = 0; i < data.TableData2.length; i++) {
          console.log(data.TableData2[i].gua_time);
          let guaTime = new Date(data.TableData2[i].gua_time);
          let year = guaTime.getFullYear(); //年
          let month = (guaTime.getMonth() + 1).toString().padStart(2, "0");
          let day = guaTime.getDate().toString().padStart(2, "0");
          let h = guaTime.getHours();
          h = h < 10 ? "0" + h : h;
          let m = guaTime.getMinutes();
          m = m < 10 ? "0" + m : m;
          let s = guaTime.getSeconds();
          s = s < 10 ? "0" + s : s;
          data.TableData2[i].gua_time =
            year + "-" + month + "-" + day + " " + h + ":" + m + ":" + s;
        }
        data.TableData2.forEach((ele) => {
          ele.imgSrc = host + ele.imgSrc;
        });
        console.log(data.TableData2);
      });
    }
    getguahao();
    // 第一个图
    let echart = echarts;
    let echart1 = echarts;
    onMounted(() => {
      initChart();
      initChart1();
    });
    onUnmounted(() => {
      echart.dispose;
      echart1.dispose;
    });
    // 基础配置一下Echarts
    function initChart() {
      let chart = echart.init(document.getElementById("myEcharts"), "skyblue");
      // 把配置和数据放这里
      chart.setOption({
        xAxis: {
          type: "category",
          data: [
            "1月1日",
            "1月2日",
            "1月3日",
            "1月4日",
            "1月5日",
            "1月6日",
            "1月7日",
          ],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [5600, 7600, 3600, 5000, 7800, 5600, 6200],
            type: "bar",
            barMaxWidth: 20,
          },
          {
            name: "目标值",
            type: "scatter",
            symbol: "rect",
            symbolSize: [30, 3],
            // data: [25, 30, 40, 50, 60, 70, 80],
            color: "#00BFFF",
            hoverAnimation: false,
            z: 4,
          },
        ],
      });
      window.onresize = function () {
        //自适应大小
        chart.resize();
      };
    }
    // 第二个图
    function initChart1() {
      let chart = echart1.init(document.getElementById("myEcharts1"));
      // 把配置和数据放这里
      chart.setOption({
        xAxis: {
          type: "category",
          data: [
            "1月1日",
            "1月2日",
            "1月3日",
            "1月4日",
            "1月5日",
            "1月6日",
            "1月7日",
          ],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
            smooth: true,
            lineStyle: {
              color: "#49bfde",
            },
          },
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
            smooth: true,
            lineStyle: {
              color: "#ee7c2f",
            },
            animationDelay: 50,
            animationDuration: 5000,
          },
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
            smooth: true,
            lineStyle: {
              color: "#49bfde",
            },
            animationDelay: 500,
            animationDuration: 5000,
          },
        ],
      });
      window.onresize = function () {
        //自适应大小
        chart.resize();
      };
    }

    return { ...toRefs(data), initChart, host };
  },
};
</script>
<style lang="scss" scoped>
.about {
  margin-bottom: 40px;
}

.clear::after {
  content: "";
  display: block;
  clear: both;
}
.Top-nav {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
}
.top {
  font-size: 12px;
}
img {
  width: 60px;
  height: 60px;
}
.neirong {
  font-size: 10px;
}
.navbox {
  width: 200px;
  height: 80px;
  background: #ffffff;
  /* border: 1px red solid; */
  box-sizing: border-box;
  padding: 10px;
  display: flex;
  justify-content: flex-start;
}

.content {
  width: 100px;
  height: 60px;
  //   border: 1px solid yellow;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  box-sizing: border-box;
  padding-left: 10px;
}
.img1 {
  width: 22px;
  height: 18px;
}
.mid {
  margin-top: 15px;
  width: 100%;
  /* height: 200px; */
  // border: 1px solid red;
}

.tit {
  font-weight: 700;
  font-size: 16px;
  margin-left: 15px;
}
.left {
  //   border: 1px solid blue;
  box-sizing: border-box;
  padding-top: 20px;
  background: white;
  float: left;
  width: 48%;
  position: relative;
}
.right {
  //   border: 1px solid yellow;
  box-sizing: border-box;
  padding-top: 20px;
  background: white;
  float: right;
  width: 48%;
  position: relative;
}
.tubox {
  width: 100%;
  //   border: 1px red solid;
  margin-top: 10px;
}
.little {
  position: absolute;
  top: 65px;
  left: 15px;
  font-size: 10px;
  color: darkgray;
}
.biao {
  // background: white;
  width: 100%;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}
.biao-left {
  background: white;
  width: 48%;
}
.biao-right {
  width: 48%;
  display: flex;
  justify-content: space-between;
}
.table-tu {
  height: 30px;
  width: 30px;
  border-radius: 15px;
  background: #ddecff;
}
.table1 {
  font-size: 10px;
}
.biao-right-l,
.biao-right-r {
  width: 48%;
  height: 400px;
  background: white;
  // border: 1px red solid;
}
.table1-tu {
  height: 30px;
  width: 30px;
  border-radius: 15px;
  background: #cecece;
  line-height: 30px;
  text-align: center;
}
.active {
  background: #f299a1;
}
.active1 {
  background: #a3f07f;
}
.active2 {
  background: #fdcd9f;
}
</style>
